<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>dom</title>
		<style>
			#box{
				width: 800px;
				height: 800px;
			}
			span{
				display: block;
				width: 200px;
				height: 50px;
				background-color: orangered;
				
			}
			.childDiv{
				width: 200px;
				height: 200px;
				background-color: gainsboro;
				opacity: 0;
				 transition: opacity 0.1s;
				//display: none;
				
			}
			.box1{
				margin-left: 10px;
				float: left;
			}
			
		</style>
	</head>
	<body>
		<div id="box">
			<div class="box1">
				<span>span text</span>
				<div class="childDiv">
					<ul>
						<li>list item 1</li>
						<li>list item 2</li>
						<li>list item 3</li>
						<li>list item 4</li>
						<li>list item 5</li>
					</ul>
				</div>
			</div>
			<div class="box1">
				<span>span text</span>
				<div class="childDiv">
					<ul>
						<li>list item 1</li>
						<li>list item 2</li>
						<li>list item 3</li>
						<li>list item 4</li>
						<li>list item 5</li>
					</ul>
				</div>
			</div>
			<div class="box1">
				<span>span text</span>
				<div class="childDiv">
					<ul>
						<li>list item 1</li>
						<li>list item 2</li>
						<li>list item 3</li>
						<li>list item 4</li>
						<li>list item 5</li>
					</ul>
				</div>
			</div>
		</div>
		
		
		<script>
			
			var menus = document.querySelectorAll("span");
			var children = document.querySelectorAll(".childDiv");
			for(let i=0;i<menus.length;i++){
				
				menus[i].addEventListener('mouseover',function(){
					menus[i].style.backgroundColor = "blue";
					//children[i].style.display="block";
					 children[i].style.opacity = 1;
				})
				menus[i].addEventListener('mouseout',function(){
					menus[i].style.backgroundColor = "red";
					//children[i].style.display="none";
					 children[i].style.opacity = 0;
				})
			}
			/* document.querySelectorAll('span')[0].addEventListener('mouseover',function(){
				document.getElementsByClassName('childDiv')[0].style.display="block";
			})
			document.querySelectorAll('span')[0].addEventListener('mouseout',function(){
				document.getElementsByClassName('childDiv')[0].style.display="none";
			})
			document.querySelectorAll('span')[1].addEventListener('mouseover',function(){
				document.getElementsByClassName('childDiv')[1].style.display="block";
			})
			document.querySelectorAll('span')[1].addEventListener('mouseout',function(){
				document.getElementsByClassName('childDiv')[1].style.display="none";
			})
			document.querySelectorAll('span')[2].addEventListener('mouseover',function(){
				document.getElementsByClassName('childDiv')[2].style.display="block";
			})
			document.querySelectorAll('span')[2].addEventListener('mouseout',function(){
				document.getElementsByClassName('childDiv')[2].style.display="none";
			}) */
		</script>
	</body>
</html>